<template>
  <div class="ChannelEdit-container">
    <!--频道编辑-->
    <van-cell :border="false">
      <div slot="title">我的频道</div>
      <van-button type="danger" size="mini" plain round @click="isEdit = !isEdit">{{isEdit ? '完成' : '编辑'}}</van-button>
    </van-cell>
    <!--频道宫格-->
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item v-for="(item, index) in myChannels" :key="index" @click="onMyChannelClick(item, index)">
        <!--
        v-bind:class 语法
        一个对象  对象中的 key 表示要作用的 CSS 类名
                  对象中的 value 要计算出布尔值
                  true, 则作用该类名
                  false, 不作用类名
        -->
        <span class="text" :class="{ active: index === active }" slot="text">{{item.name}}</span>
        <van-icon v-show="isEdit && !fiexChannels.includes(item.id)" class="clear" slot="icon" name="clear"></van-icon>
      </van-grid-item>
    </van-grid>
    <!--频道推荐-->
    <van-cell class="recommend-cell" :border="false">
      <div slot="title">频道推荐</div>
      <!--<van-button type="danger" size="mini" plain round>编辑</van-button>-->
    </van-cell>
    <!--频道宫格-->
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item v-for="(item, index) in recommendChannels" :key="index" icon="plus" :text="item.name" @click="onAddChannel(item)" />
    </van-grid>
  </div>
</template>

<script>
// 用容器的 mapState 方法映射到组件中
import { mapState } from 'vuex'
// 导入请求
import { getAllChannels, addUserChannel, deleteUserChannel } from '../../../api/channel.js'
// 引入存储
import { setItem } from '../../../utils/storage.js'

export default {
  name: 'ChannelEdit',
  components: {},
  data () {
    return {
      allChannels: [], // 所有频道
      isEdit: false, // 控制编辑状态的显示
      fiexChannels: [0] // 固定频道，不允许删除
    }
  },
  props: {
    myChannels: {
      required: true,
      type: Array
    },
    active: {
      required: true,
      type: Number
    }
  },
  computed: {
    ...mapState(['user']), // 映射user
    // 计算属性会观测内部依赖数据的变化
    // 如果依赖的数据发生变化，则计算属性会重新求值 执行
    recommendChannels () {
      // 数组的 filter 方法：遍历数组，把符合条件的元素存储到新数组
      return this.allChannels.filter(channel => {
        // const channels = []

        // 数组的 find 方法：遍历数组，把符合条件的第1个元素返回
        return !this.myChannels.find(myChannels => {
          return myChannels.id === channel.id
        })
      })
    }
    /* recommendChannels () {
      const channels = []
      this.allChannels.forEach(channel => {
        // find 遍历数组，找到满足条件的元素项
        const ret = this.myChannels.find(myChannel => {
          return myChannel.id === channel.id
        })
        // 取反 如果我的频道中不包括该频道项，则收集到推荐频道中
        if (!ret) {
          channels.push(channel)
        }
      })
      // 把计算结果返回
      return channels
    } */
  },
  created () {
    this.loadAllChannels()
  },
  methods: {
    // 获取所有频道
    async loadAllChannels () {
      try {
        const { data } = await getAllChannels()
        // console.log(data)
        this.allChannels = data.data.channels
      } catch (err) {
        this.$toast('获取频道数据失败')
      }
    },
    // 拿到添加的频道
    async onAddChannel (item) {
      // console.log(item)
      this.myChannels.push(item)
      // 数据持久化处理
      if (this.user) {
        try {
          // 已登录，把数据请求接口放到线上
          await addUserChannel({
            id: item.id, // 频道id
            seq: this.myChannels.length // 序号
          })
        } catch (err) {
          this.$toast('保存失败，请稍后重试！')
        }
      } else {
        // 未登录，把数据存储到本地
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    },
    // 点击删除
    onMyChannelClick (item, index) {
      if (this.isEdit) {
        // 1.如果是固定频道，则不删除
        if (this.fiexChannels.includes(item.id)) {
          return
        }
        // 2.删除频道
        this.myChannels.splice(index, 1)
        // 3.如果删除的激活频道之前的频道，则更新激活的频道项
        // 参数1: 要删除的元素的开始索引（包括）
        // 参数2: 删除的个数，如果不指定，则从参数1开始一直删除
        if (index <= this.active) {
          // 让激活频道的索引 减 1
          this.$emit('update-active', this.active - 1, true)
        }
        // 4.处理持久化
        this.deleteChannel(item)
      } else {
        // 非编辑状态，执行切换频道
        this.$emit('update-active', index, false)
      }
    },
    async deleteChannel (item) {
      try {
        if (this.user) {
          // 已登录，则将数据更新到线上
          await deleteUserChannel(item.id)
        } else {
          // 未登录，将数据更新到本地
          setItem('TOUTIAO_CHANNELS', this.myChannels)
        }
      } catch (err) {
        this.$toast('操作失败，请稍后重试！')
      }
    }
  }
}
</script>

<style scoped lang="less">
.ChannelEdit-container{
  padding: 50px 0;
}
.van-button--mini{
  padding-left: 15px;
  padding-right: 15px;
  vertical-align: top;
}
/deep/ .my-grid .van-grid-item{
  .van-grid-item__content{
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
  }
  .van-grid-item__content{
    flex-direction: row;
  }
  .van-icon-clear,.van-grid-item__icon-wrapper{
    position: absolute;
    right: -3px;
    top: -3px;
    font-size: 16px;
    color: #cacaca;
    z-index: 2;
  }
  .van-grid-item__text{
    margin-top: 0;
  }
  .text{
    color: #646566;
    font-size: 12px;
    line-height: 1.5;
    word-break: break-all;
  }
  .active{
    color: #ee0a24;
  }
}
.recommend-cell{
  margin-top: 30px;
}
/deep/ .recommend-grid .van-grid-item{
  .van-grid-item__content{
    padding-top: 10px;
    padding-bottom: 10px;
    white-space: nowrap;
  }
  .van-grid-item__content{
    flex-direction: row;
  }
  .van-grid-item__icon{
    font-size: 18px;
    margin-right: 4px;
  }
  .van-grid-item__text{
    margin-top: 2px;
  }
  .active{
    color: #ee0a24;
  }
}
</style>
